<template>
  <div class="filters">
    <el-row>
      <!-- 价格 -->
      <el-col :span="5" class="col-width">
        <div class="block">
          <span class="demonstration">价格</span>
          <span class="price">0-4000</span>
          <el-slider
            v-model="Paicevalue"
            :min="0"
            :max="4000"
            @change="getslierprice"
          ></el-slider>
        </div>
      </el-col>
      <!-- 住宿等级 -->
      <el-col :span="4" class="col-width">
        <span class="live-level">住宿等级</span>
        <el-select
          v-model="levels"
          multiple
          collapse-tags
          placeholder="选择住宿等级"
          class="select-outline"
          @change="gethotellevel"
        >
          <el-option
            v-for="item in optionsdata.levels"
            :key="item.id"
            :label="item.name"
            :value="item.level"
          >
          </el-option>
        </el-select>
      </el-col>
      <!-- 住宿类型 -->
      <el-col :span="4" class="col-width">
        <span class="live-level">住宿类型</span>
        <el-select
          v-model="types"
          multiple
          collapse-tags
          placeholder="选择住宿类型"
          class="select-outline"
          @change="gethotelType"
        >
          <el-option
            v-for="item in optionsdata.types"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <!-- 酒店设施 -->
      <el-col :span="4" class="col-width">
        <span class="live-level">酒店设施</span>
        <el-select
          v-model="assets"
          multiple
          collapse-tags
          placeholder="选择酒店设施"
          class="select-outline"
          @change="gethotelbrands"
        >
          <el-option
            v-for="item in optionsdata.assets"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <!-- 酒店品牌 -->
      <el-col :span="4" class="col-width">
        <span class="live-level">酒店品牌</span>
        <el-select
          v-model="brands"
          multiple
          collapse-tags
          placeholder="选择酒店品牌"
          class="select-outline"
          @change="gethotelBrands"
        >
          <el-option
            v-for="item in optionsdata.brands"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <!-- 筛选按钮 -->
      <el-col :span="3" class="col-width col-width-last-child">
        <el-button type="primary" class="filters-button" @click.native="clear"
          >撤销条件</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { postcities, cityposition } from "@/api/post.js";
export default {
  props: ["optionsdata", "hotelPrice", "page"],
  data() {
    return {
      Paicevalue: 4000,
      levels: [], //住宿等级
      types: [], //住宿类型
      assets: [], //住宿设备
      brands: [], //住宿品牌
      level: "",
      id: "",
      getTown: "",
      limit: 10,
      a: null,
      b: null,
      c: null,
      d: null,
    };
  },
  // 监听路由的变化
  async $route() {
    let citiesRes = await postcities(this.$route.query.cityName);
    if (citiesRes && citiesRes.data.data[0]) {
      this.id = citiesRes.data.data[0].id;
      console.log(this.id);
      // this.$emit("getposition", pisotioncity);
    }
  },

  methods: {
    // 点击清理的时候获取
    async clear() {
      this.levels = [];
      this.types = [];
      this.assets = [];
      this.brands = [];
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
      }
      let pisotioncity = await cityposition({
        city: this.id,
      });

      this.$emit("getposition", pisotioncity);
    },
    // 获取滑动的价格
    async getslierprice(v) {},
    //获取住宿等级
    async gethotellevel(level) {
      this.a = level[0];
      this.$emit("send1", level[0]);
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
        console.log(this.id);
        // this.$emit("getposition", pisotioncity);
      }
      //数组
      let pisotioncity = await cityposition({
        city: this.id,
        _limit: 10,
        hotellevel: this.a ? this.a : null,
        hoteltype: this.b ? this.b : null,
        hotelasset: this.c ? this.c : null,
        hotelbrand: this.d ? this.d : null,
        enterTime: this.$route.query.enterTime
          ? this.$route.query.enterTime
          : null,
        enterTime: this.$route.query.cityName ? this.$route.query.cityName : "",
      });

      this.$emit("getposition", pisotioncity);
    },
    // 获取酒店类型
    async gethotelType(type) {
      this.b = type[0];
      this.$emit("send2", type[0]);
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
        console.log(this.id);
      }

      let pisotioncity = await cityposition({
        // hoteltype: type[0],
        city: this.id,
        _limit: 10,
        hotellevel: this.a ? this.a : null,
        hoteltype: this.b ? this.b : null,
        hotelasset: this.c ? this.c : null,
        hotelbrand: this.d ? this.d : null,
        enterTime: this.$route.query.enterTime
          ? this.$route.query.enterTime
          : null,
        enterTime: this.$route.query.cityName ? this.$route.query.cityName : "",
      });
      // console.log(pisotioncity);

      this.$emit("getposition", pisotioncity);
    },
    // 获取酒店设施
    async gethotelbrands(brands) {
      this.c = brands[0];
      this.$emit("send3", brands[0]);
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
      }
      console.log(brands);
      let pisotioncity = await cityposition({
        // hotelasset: brands[0],
        city: this.id,
        _limit: 10,
        hotellevel: this.a ? this.a : null,
        hoteltype: this.b ? this.b : null,
        hotelasset: this.c ? this.c : null,
        hotelbrand: this.d ? this.d : null,
        enterTime: this.$route.query.enterTime
          ? this.$route.query.enterTime
          : null,
        enterTime: this.$route.query.cityName ? this.$route.query.cityName : "",
      });
      // console.log(pisotioncity);

      this.$emit("getposition", pisotioncity);
    },
    // 获取酒店品牌
    async gethotelBrands(Brands) {
      this.d = Brands[0];
      this.$emit("send4", Brands[0]);
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
      }
      console.log(Brands);
      let pisotioncity = await cityposition({
        // hotelbrand: Brands[0],
        city: this.id,
        _limit: 10,
        hotellevel: this.a ? this.a : null,
        hoteltype: this.b ? this.b : null,
        hotelasset: this.c ? this.c : null,
        hotelbrand: this.d ? this.d : null,
        enterTime: this.$route.query.enterTime
          ? this.$route.query.enterTime
          : null,
        enterTime: this.$route.query.cityName ? this.$route.query.cityName : "",
      });
      // console.log(pisotioncity);

      this.$emit("getposition", pisotioncity);
    },
  },
};
</script>

<style lang="less" scoped>
.filters {
  margin-top: 15px;
  border: 1px solid #ddd;
  padding: 5px 15px;
  color: #666;
  margin-bottom: 15px;
}
/deep/ .el-input__inner {
  border: 0;
}
.col-width {
  border-right: 1px solid #ddd;
  padding: 5px;
}
.col-width:last-child {
  border-right: 0;
}
.demonstration {
  margin-right: 40px;
}
.select-outline {
  outline: none;
}
.filters-button {
  justify-content: center;
}
.col-width-last-child {
  padding: 22px 15px 16px 12px;
}
</style>